<template>
  <div class="list" @scroll="scrollEvent" ref="listref">
    <div v-for="(item,index) in props.datas" :key="index" class="item">
      <img :src="item.img" class="img" @click="imgClick(item)"/>
      <div class="title">{{ item.title }}</div>
      <div class="name">{{ item.name }}</div>
      <div v-if="item.info" class="name" :style="{color:item.info === '入场'?'#FACE96':''}">{{ item.info }}</div>

      <div class="time">{{ item.time }}</div>
    </div>
  </div>
</template>

<script setup>

import {ref} from "@vue/reactivity";
import {inject} from "vue";

const listref = ref()
const props = defineProps({
  datas: {
    type: Array,
    default: []
  }
});
const onPlayPreview = inject("playPreview")
const emit = defineEmits(["scrollEvent"]);
const scrollEvent = (event) => {
  if (Math.ceil(event.currentTarget.scrollTop + event.currentTarget.clientHeight) >= event.currentTarget.scrollHeight - 80) {
    emit("scrollEvent");
  }
};
const toTop = ()=>{
  console.log(listref.value.scrollTop);
  if ("scrollTop" in listref.value){
    listref.value.scrollTop = 0
  }
}
const imgClick = (item) => {
  if (item.img){
    onPlayPreview(item.img)
  }
};
defineExpose({
  toTop
})
</script>

<style lang="less" scoped>
@import "@/styles/__index.less";

.list {
  display: flex;
  //justify-content: flex-start;
  align-content: flex-start;
  height: 100%;
  padding: 15px 10px;
  box-sizing: border-box;
  gap: 17px;
  flex-wrap: wrap;
  overflow-y: auto;

  .item {
    width: 200px;
    height: 210px;
    background: url("@/assets/middle-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    align-items: center;

    .img {
      width: 180px;
      height: 100px;
      //background: url("@/assets/temp.jpg");
      //background-size: cover;
      //background: black;
      border-radius: 10px;
    }

    .title {
      font-size: 17px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #B7FFFF;
    }

    .name {
      font-size: 14px;
    }

    .time {
      font-size: 10px;

    }
  }
}
</style>
